﻿

<style>
	/*.col-md-10 {*/
	/*	flex: 0 0 70.333333%;*/
	/*	max-width: 70.333333%;*/
	/*}*/

	/*.col-md-2 {*/
	/*	flex: 0 0 25.666667%;*/
	/*	max-width: 25.666667%;*/
	/*}*/
</style>

<div class="row">
	<div class="colxl-12 col-lg-12 col-md-12 col-sm-12 col-12">
		<div class="add-group">
			<a class="ad-btn" data-toggle="modal" data-target="#exampleModalLong" @click="openAdd">添加</a>
		</div>
	</div>
</div>


<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="exampleModalLongTitle" >{{modalTitle}}</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<form>
					<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
						<div class="form-group row">
							<label style="display:inline;margin-top: 3%" >名字：&nbsp;&nbsp;&nbsp;</label>
							<div class="col-md-10">
								<input class="form-control" type="text" v-model="employee.name" placeholder="请输入名字">
							</div>
						</div>
						<div class="form-group row">
							<label style="display:inline;margin-top: 3%" >手机号：</label>
							<div class="col-md-10">
								<input class="form-control" type="text" v-model="employee.phone" placeholder="请输入手机号">
							</div>
						</div>
						<div class="form-group row">
							<label style="display:inline;margin-top: 3%" >地区：&nbsp;&nbsp;&nbsp;</label>
							<div class="col-md-10">
								<select id="" class="form-control" v-model="areaVal">
									<option v-for="obj in areaList" :value="obj">{{obj.name}}</option>
								</select>
							</div>
						</div>

					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" @click="saveOrUpdate()">保存</button>
				<button type="button" id="closeModal" class="btn btn-secondary" data-dismiss="modal">取消</button>
			</div>
		</div>
	</div>
</div>


                <!-- Products view Start -->
				<div class="row">
                    <!-- Styled Table Card-->
                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                        <div class="card table-card">
                            <div class="card-body">
                               <table id="example" class="table table-striped table-bordered dt-responsive nowrap" style="width:100%">
									<thead style="font-size:25px">
										<tr align="center">
											<th>序号</th>
											<th>名字</th>
											<th>电话</th>
											<th>地区</th>
											<th>状态</th>
											<th>操作</th>
										</tr>
									</thead>
									<tbody>
										<tr v-for="(obj,index) in employeeList" align="center">
											<td style="font-size:25px">{{index+1}}</td>
											<td style="font-size:25px">{{obj.name}}</td>
											<td style="font-size:25px">{{obj.phone}}</td>
											<td style="font-size:25px">{{obj.aname}}</td>
											<td style="font-size:25px;color:deepskyblue" v-if="obj.status==0">待审核</td>
											<td style="font-size:25px;color: blue" v-if="obj.status==1">审核通过</td>
											<td style="font-size:25px;color: red" v-if="obj.status==2">停止使用</td>
											<td>
												<div >
													<button type="button" class="btn btn-success mt-2 mr-2"
															@click="openEdit(obj.id)"
															data-toggle="modal" data-target="#exampleModalLong"
														>修改</button>
													<button type="button" class="btn btn-success mt-2 mr-2"
															@click="updateStatus(obj.id,'1')" v-if="obj.status==0"
													>审核通过</button>
													<button type="button" class="btn btn-danger mt-2 mr-2"
															@click="updateStatus(obj.id,'2')" v-if="obj.status==1"
													>停止使用</button>
													<button type="button" class="btn btn-success mt-2 mr-2"
															@click="updateStatus(obj.id,'1')" v-if="obj.status==2"
													>开启使用</button>
<!--													<button type="button" class="btn btn-danger mt-2 mr-2"-->
<!--															@click="delById(obj.id)">删除</button>-->
												</div>
											</td>
										</tr>
									</tbody>
								</table>
                            </div>
                        </div>
                    </div>
                </div>

<script>

	new Vue({
		el:"#app",
		data:{
			employeeList:[],
			modalTitle: '',
			employee: {'id':'','name':'',phone:''},
			areaList: [],
			areaVal: {}
		},
		created:function (){
			this.selectList()
		},
		methods:{
			selectList:function () {
				axios.get(
						"/admin/employee/getList"
				).then(response=>{
					this.employeeList = response.data
				})
			},
			openEdit:function(id){
				this.modalTitle = "修改"
				this.employee = {}
				this.areaVal = {}
				this.selectArea()
				axios.get(
						"/admin/employee/findById/"+id,
				).then(response=>{
					this.employee = response.data
					this.areaVal.id = this.employee.aid
					this.areaVal.name = this.employee.aname
					console.log(this.employee)
				})
			},
			openAdd:function(){
				this.modalTitle = "添加"
				this.employee = {}
				this.areaVal = {}
				this.selectArea()
			},
			selectArea:function (){
				axios.get(
						"/admin/area/selectListAll"
				).then(response=>{
					this.areaList = response.data
				})
			},
			saveOrUpdate:function (){
				this.employee.aid = this.areaVal.id
				this.employee.aname = this.areaVal.name
				axios.post("/admin/employee/saveOrUpdate",this.employee).then(response=>{
					$("#closeModal").click()
					this.selectList()
				})
			},
			delById:function (id){
				axios.get("/admin/employee/deleteById/"+id).then(response=>{
					this.selectList()
				})
			},
			updateStatus:function (id,status){
				axios.get("/admin/employee/updateStatus/"+id+"/"+status).then(response=>{
					this.selectList()
				})
			}
		}
	});

</script>

